<template>
  <div class="swiper-box">
    <swiper
      :style="{
        '--swiper-navigation-color': '#fff',
        '--swiper-pagination-color': '#fff',
      }"
      :spaceBetween="10"
      :navigation="true"
      :thumbs="{ swiper: thumbsSwiper }"
      :modules="modules"
      class="mySwiper2"
    >
      <swiper-slide v-for="item in list1" :key="item.id"
        ><img :src="funimg(item)"
      /></swiper-slide>
    </swiper>
    <swiper
      @swiper="setThumbsSwiper"
      :spaceBetween="10"
      :slidesPerView="4"
      :freeMode="true"
      :watchSlidesProgress="true"
      :modules="modules"
      class="mySwiper"
    >
      <swiper-slide v-for="item in list1" :key="item.id"
        ><img :src="funimg(item)"
      /></swiper-slide>
    </swiper>
  </div>
</template>
<script>
import { ref, onMounted } from "vue";
import request from "@/request/request";

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/css";

import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";

// import required modules
import { FreeMode, Navigation, Thumbs } from "swiper/modules";

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      // 轮播图
      let data = new FormData();
      data.set("bannerType", "mall_advert_type");
      request("findAdvertList", "post", data).then((res) => {
        let data = res.data.advertList;
        this.list1 = data;
      });
    },
    funimg(item) {
      return "http://121.40.105.156:8088" + item.advertUrl;
    },
  },
  data() {
    const thumbsSwiper = ref(null);
    const setThumbsSwiper = (swiper) => {
      thumbsSwiper.value = swiper;
    };

    return {
      thumbsSwiper,
      setThumbsSwiper,
      modules: [FreeMode, Navigation, Thumbs],
      list1: [],
    };
  },
};
</script>
<style lang="scss">
.swiper-box {
  width: 100%;
  height: calc(100vh - 9.375rem);
  overflow: hidden;
  position: relative;
  .swiperBox1 {
    position: relative;
    display: flex;
    justify-content: center;
    transform: translateX(0rem);
    .last-img {
      width: 100%;
      // height: 25rem;
      flex-shrink: 0;
      margin: 0 0.9375rem;
    }
  }
  .pre {
    position: absolute;
    z-index: 9;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    transform: translateX(-50%);
    margin-left: -35rem;
    width: 2.5rem;
    height: 2.5rem;
    z-index: 9;
  }
  .next {
    position: absolute;
    z-index: 9;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    transform: translateX(-50%);
    margin-left: 35rem;
    width: 2.5rem;
    height: 2.5rem;
    z-index: 9;
  }
}
.mySwiper {
  flex-shrink: 0;
  margin: 0 0.9375rem;
  position: relative;
}
.mySwiper {
  height: 20%;
  box-sizing: border-box;
  padding: 0.625rem 0;
}
.swiper {
  // width:75rem;
  width: 100%;
  // height: 31.25rem;
}
// .swiper-slide {
//   width: 100% !important;
//   // height: 25rem;
//   display: flex;
//   justify-content: center;
//   img {
//     width: 100% !important;
//   }
// }
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  top: 90%;
}
.swiper-pagination-bullet {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 1;
  background: rgba(255, 255, 255, 0.7);
}

.swiper-pagination-bullet-active {
  width: 0.625rem;
  height: 1.25rem;
  border-radius: 0.3125rem;
  opacity: 1;
  background-color: #fff;
}

// #app {
//   height: 100%;
// }
// html,
// body {
//   position: relative;
//   height: 100%;
// }

// body {
//   background: #eee;
//   font-family:
//     Helvetica Neue,
//     Helvetica,
//     Arial,
//     sans-serif;
//   font-size: 14px;
//   color: #000;
//   margin: 0;
//   padding: 0;
// }
.swiper-box {
  position: relative;
}
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 1.125rem;
  background: #fff;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper {
  width: 100%;
  // height: 600px;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.mySwiper2 {
  width: 100%;
}
.swiper-box {
  position: relative;
}
.mySwiper {
  position: absolute;
  height: 5rem;
  box-sizing: border-box;
  padding: 1rem 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

.mySwiper .swiper-slide {
  width: 5rem !important;
  // width: 100% !important;
  background-color: transparent;
  height: 3rem;
  border: 0.125rem solid;
  border-color: rgba(255, 255, 255, 0.5);
}
.mySwiper .swiper-wrapper {
  justify-content: center;
}
.mySwiper .swiper-slide-thumb-active {
  border: 0.125rem solid #fff;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
